<template>
	<!-- 头部公共部份 -->
	<Header></Header>
	<!-- 中间部分 -->
	<div class="detail-title">
		<div class="detail-main">
			<div class="detail-map">
				<el-breadcrumb :separator-icon="ArrowRight">
					<el-breadcrumb-item>课程</el-breadcrumb-item>
					<el-breadcrumb-item>免费课</el-breadcrumb-item>
					<el-breadcrumb-item>{{ detail.courseName }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="detail-name">{{ detail.courseName }}</div>
			<div class="detail-content"><div>难度 入门</div></div>
		</div>
	</div>
	<div class="detai-container">
		<div class="tab-name">
			<ul>
				<li :class="isActive == 1 ? 'active' : ''" @click="isActive = 1">章节</li>
				<li :class="isActive == 2 ? 'active' : ''" @click="isActive = 2">下载笔记代码</li>
			</ul>
		</div>
		<div class="tab-chapters" v-if="isActive == 1">
			<div class="tab-txt">
				<div class="txt-content">{{ detail.bizCourseDetail ? detail.bizCourseDetail : '暂无课程介绍...' }}</div>
				<div class="txt-btn">
					<div class="payment">立即购买</div>
					<div class="add-cart" @click="add_Cart">加入购物车</div>
				</div>
			</div>
			<div class="detail-list">
				<div class="item" v-for="item in bizCourseChapters" :key="item.id">
					<div class="item-title">
						<div class="item-name">{{ item.chapterName }}</div>
						<div class="item-key">{{ item.description }}</div>
					</div>
					<ul>
						<li v-for="k in item.children" :key="k.id">
							<div class="course">
								<el-icon><VideoCameraFilled /></el-icon>
								<div>视频:{{ k.chapterName }}</div>
							</div>
							<div class="course-video" @click="goPlay(item, k.id)">开始学习</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="tab-main" v-if="isActive == 2">
			<ul>
				<li v-for="item in bizCourseAttachments" :key="item.id">
					<div>{{ item.attachmentName }}</div>
					<div class="download" @click="downloadSouece(item)">下载资料</div>
				</li>
			</ul>
		</div>
	</div>

	<!-- 底部公共布局 -->
	<Footer></Footer>
</template>

<script setup>
import { ArrowRight, VideoCameraFilled } from '@element-plus/icons-vue';
//api
import { getDetail, coueseCheckAuth, downloadAttachment } from '@/utils/api/course';
import { addShopCar } from '@/utils/api/cart';
import { createToken } from '@/utils/api/createToken';
// 引入store
import { useUserStore } from '@/stores/use';
import { ElMessage } from 'element-plus';
// 路由
import { useRoute } from 'vue-router';
let router = useRouter();
let route = useRoute();
let courseId = route.query.id;
console.log('detail课程ID', courseId);

// 章节和下戴笔记代码切换
let isActive = ref(1);

// 初始化 课程详情
let detail = reactive({
	courseName: ''
});
// 初始化 课程章节
let bizCourseChapters = ref([]);
// 初始化 课程资料
let bizCourseAttachments = ref([]);

// 生命周期
onBeforeMount(() => {
	// 课程详情
	getDetail({
		courseId: route.query.id
	}).then(res => {
		let data = res.data.data;
		detail.courseName = data.courseName;
		detail.bizCourseDetail = data.bizCourseDetail.description;
		bizCourseChapters.value = data.bizCourseChapters;
		bizCourseAttachments.value = data.bizCourseAttachments;
		console.log('课程详情:', res.data.data);
	});
});

// 下载资料:
const downloadSouece = item => {
	// 1判断是否是登录状态,如果没有就跳转登录页面
	if (!useUserStore().token) {
		ElMessage.info({
			message: '请先登录'
		});
		router.push('/login');
		return;
	}

	// 2如果是登录状态,查询是否有权限下载
	coueseCheckAuth({
		courseId: item.courseId
	}).then(res => {
		// a如果没有,提醒购买
		console.log('下载资料权限', res.data.data.hasAuth);
		if (!res.data.data.hasAuth) {
			ElMessage.info({
				message: '购买该课程才可以下载资料'
			});
			return;
		}
		// b如果有权限进入下载接口
		downloadAttachment({
			courseId: item.courseId,
			attachmentId: item.id
		}).then(res => {
			const blob = new Blob([res]);
			// 下载文件
			let fileName = item.attachmentName;
			let fileUrl = item.attachmentUrl;
			// 取.后缀
			const extName = fileUrl.substring(fileUrl.lastIndexOf('.'));
			console.log('下载文件名/URL:', fileName, fileUrl, extName);
			fileName = fileName + extName;
			const link = document.createElement('a'); //创建a标签
			link.download = fileName;
			link.target = '_blank';
			link.style.display = 'none';
			link.href = URL.createObjectURL(blob); // 创建下载的链接
			document.body.appendChild(link); //将a标签添加到body中
			link.click(); //添加点击事件，进行下载
			URL.revokeObjectURL(link.href); //下载完成后移除a标签
			document.body.removeChild(link); //释放掉blob对象
		});
	});
};

// 开始学习:
const goPlay = (item, chapterId) => {
	// 1判断是否是登录状态,如果没有就跳转登录页面
	if (!useUserStore().token) {
		ElMessage.info({
			message: '请先登录'
		});
		router.push('/login');
		return;
	}

	// 2如果是登录状态,查询是否有权限下载
	coueseCheckAuth({
		courseId: item.courseId
	}).then(res => {
		// a如果没有,提醒购买
		console.log('播放权限', res.data.data.hasAuth);
		if (!res.data.data.hasAuth) {
			ElMessage.info({
				message: '购买该课程才可以播放'
			});
			return;
		}
		// b如果有权限进入播放页面
		router.push({
			path: '/course-play/' + item.courseId + '/' + chapterId
		});
	});
};

// 加入购物车
const add_Cart = () => {
	createToken().then(res => {
		let token = res.data.token;
		addShopCar(
			{
				courseId, //课程ID
				memberId: useUserStore().userInfo.id //会员ID
			},

			token
		).then(res => {
			if (res.meta.code == '200') {
				ElMessage.success({
					message: '成功加入购物车'
				});
				return;
			} else {
				ElMessage.info({
					message: '添加失败,该课程已经在购物车中了~'
				});
			}
		});
	});
};
</script>

<style scoped>
.detail-title {
	width: 100%;
	height: 183px;
	background: url(@/assets/coutseInfobg1920.png) no-repeat;
	background-size: 100% 100%;
}
.detail-main {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	padding: 25px 0;
}
::v-deep .el-breadcrumb__separator {
	color: #fff;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
	color: #fff;
	font-weight: bold;
}
::v-deep .el-breadcrumb__inner {
	color: #fff;
}
el-breadcrumb-item {
	color: #fff;
}
.detail-name {
	font-size: 27px;
	font-weight: bold;
	color: #fff;
}
.detail-content {
	color: #fff;
	font-size: 12px;
}
.tab-name {
	height: 57px;
	width: 100%;
	background: #ffffff;

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}
.tab-name ul {
	display: flex;
	align-items: center;
	width: 1000px;
	height: 57px;
	margin: 0 auto;
	font-size: 16px;
	/* 加小手 */
	cursor: pointer;
}
.tab-name ul li + li {
	margin-left: 67px;
}
.active {
	position: relative;
	color: #388fff;
	font-weight: bold;
}
/* 小线 */
.active:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 3px;
	background: #388fff;
	border-radius: 1px;
}
.tab-chapters {
	/* background: #f8fafc; */
	margin: 0 auto;
	width: 1000px;
}
.tab-txt {
	margin: 29px 0;
	width: 1000px;
	height: 147px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
	border-radius: 5px;
	/* 加小手 */
	cursor: pointer;
}
.txt-content {
	padding: 24px 27px;
}
.txt-btn {
	display: flex;
	justify-content: flex-end;
}
.payment {
	margin-right: 13px;
	width: 99px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	color: #ffffff;
	background: #f11d1d;
	border-radius: 15px;
}
.add-cart {
	margin-right: 33px;
	width: 99px;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	color: #f11d1f;
	background: #fde7e7;
	border-radius: 15px;
}

.detail-list {
	margin-top: 10px;
}
.item {
	margin-bottom: 5px;
	width: 100%;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
	border-radius: 5px;
}
.item-title {
	padding: 16px 27px;
}
.item-name {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}
.item-key {
	font-size: 12px;
	line-height: 10px;
	color: #5c5c5c;
}
.item ul {
}
.item ul li {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	padding-right: 20px;
}
/* .item ul li > course {
	display: flex;
} */
.course {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333333;
	padding-right: 20px;
}
.course > div {
	margin-left: 7px;
}
.course-video {
	width: 63px;
	height: 20px;
	line-height: 20px;
	font-size: 8px;
	color: #fff;
	text-align: center;
	background: #388fff;
	border-radius: 12px;
	cursor: pointer;
}

.tab-main {
	width: 1000px;
	margin: 0 auto;
}
.tab-main ul {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.tab-main ul li {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	line-height: 40px;
	padding: 5px;
	margin: 5px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 3px 6px rgb(0 0 0/9%);
}
.download {
	width: 100px;
	border-radius: 8px;
	margin: 5px 0;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background-color: #007bff;
	cursor: pointer;
}
</style>
